import React, { useEffect, useState } from 'react'
import utils from '../../utils/index'
import { InfiniteScroll } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
const Home = () => {
    const navigate=useNavigate()
    const [list,setList]=useState([])
    const [page,setPage]=useState(1)
    
    const getData=async()=>{
      const resp=await utils.get('/list',{params:{page}})
      console.log(resp.data.data);
      setList([...list,...resp.data.data])
      setPage(page + 1)
    }

    useEffect(()=>{
     getData()
    },[])

    const getDeail=(v)=>{
      navigate("/deail",{state:v})
    }
  return (
    <div>
      <div>
        {
            list.map((v,i)=>{
                return <div key={i} style={{
                    display: 'flex'
                }} onClick={() => getDeail(v)}>
                <img src={v.image} alt='' style={{
                    width: '100px',height: '100px'
                }}/>
                 <span className='sp1'>{v.title}</span>
                 <span className='sp2'>{v.price}￥</span>
                 <span className='sp3'>{v.date}</span>
                </div>
            })
        }
      </div>
       <InfiniteScroll loadMore={getData} hasMore={true} />
    </div>
  )
}

export default Home
